<!-- OrderList -->
<template>
  <div>
    <v-data-table
    must-sort
    :headers='headers'
    :items='tableItems'
    :totalItems="totalItems"
    :loading="loading"
    :rows-per-page-items="[20, 50, 100]"
    class='elevation-0 pa-3'
    >
      <template slot='items' slot-scope='props'>
        <td>{{props.item.order_sn}}</td>
        <td>{{props.item.goods_count}}</td>
        <td>{{props.item.buyer_contact}}</td>
        <td>{{props.item.amount}}</td>
        <td>{{props.item.status}}</td>
        <td>{{props.item.updatedAt}}</td>
        <td>
          <v-btn flat outline icon class="" small @click="onBtnDetail(props)"><v-icon small>zoom_in</v-icon></v-btn>
          <!-- <v-btn flat icon class="primary" small><v-icon small>edit</v-icon></v-btn> -->
          <v-btn flat icon disabled class="warning" small @click="onBtnDelete(props)"><v-icon small>delete</v-icon></v-btn>
        </td>
      </template>
      <template slot="no-data">
        <v-alert :value="true" color="info" icon="warning">
          暂无数据！
        </v-alert>
      </template>
      <template slot="pageText" slot-scope="props">
        当前显示 {{ props.pageStart }} - {{ props.pageStop }} 条，共有<b> {{ props.itemsLength }}</b>条数据
      </template>
    </v-data-table>
  </div>
</template>
<script>
import { fetchUserList, deleteUserOne } from '@/api/shop/order.js'
export default {
  name: 'OrderList',
  data: function () {
    return {
      headers: [
        { text: '订单编号', value: 'order_sn' },
        { text: '数量', value: 'goods_count' },
        { text: '收件人', value: 'buyer_contact' },
        { text: '价格', value: 'amount' },
        { text: '状态', value: 'status' },
        { text: '时间', value: 'updatedAt' },
        { text: '操作', value: 'order_sn' }
      ],
      tableItems: [],
      loading: false,
      totalItems: 0,
      pagination: {
        descending: true
      }
    }
  },
  created: function () {
    // this.fetchData()
  },
  watch: {
    pagination: {
      handler () {
        this.fetchData()
      },
      deep: true // 发现对象内部值的变化
    }
  },
  components: {},
  computed: {},
  methods: {
    fetchData: function () {
      const { sortBy, descending, page, rowsPerPage } = this.pagination
      this.loading = true
      fetchUserList({ page: page, sort: sortBy, list_rows: rowsPerPage, descending: descending }).then(res => {
        this.tableItems = res.data.data
        this.totalItems = res.data.total
      }).catch(() => {
        // console.log(err)
        // this.$toasted.error(err.message)
      }).finally(() => {
        this.loading = false
      })
    },
    onBtnDetail: function (props) {
      this.$router.push({ name: 'MemberOrderDetail', query: { order_sn: props.item.order_sn } })
    },
    onBtnDelete: function (props) {
      deleteUserOne(props.item.id).then(res => {
        this.tableItems.splice(props.index, 1)
        this.totalItems--
      }).catch(err => {
        alert(err.response.data)
      })
    }
  }
}
</script>
